@props(['modules' => [], 'activeModule' => '', 'title' => '', 'activeMenu' => ''])

<x-admin.layout>
    {{-- 后台管理框架页面 --}}
    <x-slot:title>
        {{$title}}
    </x-slot:title>
    <div x-data="{
        // 侧边栏状态
        sidebarExpanded: true,        // 侧边栏是否展开（>=1024px时使用）
        sidebarCollapsed: true,       // 侧边栏是否收窄（768-1024px时使用，默认收窄）
        sidebarVisible: false,        // 侧边栏是否可见（<768px时使用）

        // 当前屏幕尺寸状态
        isLargeScreen: window.innerWidth >= 1024,
        isMediumScreen: window.innerWidth >= 768 && window.innerWidth < 1024,
        isSmallScreen: window.innerWidth < 768,

        activeModule: 'home',
        activeMenu: '{{$activeMenu}}',
        userDropdownOpen: false,

        // 切换侧边栏
        toggleSidebar() {
            if (this.isLargeScreen) {
                // 大屏幕：展开/收窄
                this.sidebarExpanded = !this.sidebarExpanded;
            } else if (this.isMediumScreen) {
                // 中等屏幕：收窄/展开
                this.sidebarCollapsed = !this.sidebarCollapsed;
            } else {
                // 小屏幕：显示/隐藏
                this.sidebarVisible = !this.sidebarVisible;
            }
        },

        // 获取侧边栏的显示状态
        getSidebarState() {
            if (this.isLargeScreen) {
                return {
                    open: true,
                    expanded: this.sidebarExpanded,
                    collapsed: false,
                    visible: true
                };
            } else if (this.isMediumScreen) {
                return {
                    open: true,
                    expanded: !this.sidebarCollapsed,
                    collapsed: this.sidebarCollapsed,
                    visible: true
                };
            } else {
                return {
                    open: this.sidebarVisible,
                    expanded: false,
                    collapsed: false,
                    visible: this.sidebarVisible
                };
            }
        },

        // 初始化
        init() {
            this.updateScreenState();

            // 根据初始屏幕尺寸设置默认状态
            if (this.isMediumScreen) {
                this.sidebarCollapsed = true; // 中等屏幕默认收窄
            } else if (this.isLargeScreen) {
                this.sidebarExpanded = true;  // 大屏幕默认展开
            } else {
                this.sidebarVisible = false;  // 小屏幕默认隐藏
            }

            // 监听窗口大小变化
            window.addEventListener('resize', () => {
                this.updateScreenState();
            });
        },

        // 更新屏幕状态
        updateScreenState() {
            const wasLarge = this.isLargeScreen;
            const wasMedium = this.isMediumScreen;
            const wasSmall = this.isSmallScreen;

            this.isLargeScreen = window.innerWidth >= 1024;
            this.isMediumScreen = window.innerWidth >= 768 && window.innerWidth < 1024;
            this.isSmallScreen = window.innerWidth < 768;

            // 屏幕尺寸变化时的状态调整 - 添加动画过渡
            if (wasLarge && !this.isLargeScreen) {
                // 从大屏幕变为中等屏幕
                if (this.isMediumScreen) {
                    // 先设置为false触发动画，然后延迟设置为true
                    this.sidebarExpanded = false;
                    setTimeout(() => {
                        this.sidebarCollapsed = true;
                    }, 300); // 等待动画完成
                } else {
                    this.sidebarVisible = false;
                }
            } else if (wasMedium && !this.isMediumScreen) {
                if (this.isLargeScreen) {
                    // 先设置为false触发动画，然后延迟设置为true
                    this.sidebarCollapsed = false;
                    setTimeout(() => {
                        this.sidebarExpanded = true;
                    }, 300); // 等待动画完成
                } else {
                    this.sidebarVisible = false;
                }
            } else if (wasSmall && !this.isSmallScreen) {
                if (this.isMediumScreen) {
                    this.sidebarCollapsed = true; // 中等屏幕默认收窄
                } else if (this.isLargeScreen) {
                    this.sidebarExpanded = true; // 大屏幕默认展开
                }
            }
        }
    }" x-init="init()" class="flex h-screen bg-gray-100 dark:bg-gray-900 overflow-visible">
        <!-- 侧边栏 -->
        <x-admin.sidebar
            :modules="$modules"
            :active-module="$activeModule"
            :active-menu="$activeMenu"
        />

        <!-- 主体区域 -->
        <div class="flex-1 flex flex-col min-w-0 admin-main-content"
             :class="{
                 'sidebar-expanded': (isLargeScreen && sidebarExpanded) || (isMediumScreen && !sidebarCollapsed),
                 'sidebar-collapsed': (isLargeScreen && !sidebarExpanded) || (isMediumScreen && sidebarCollapsed),
                 'sidebar-hidden': isSmallScreen
             }">
            <x-admin.header :modules="$modules" :active-module="$activeModule" />

            <!-- 主内容区 -->
            <main class="flex-1 p-6 overflow-y-auto" id="content">
                {{ $slot }}
            </main>
        </div>

        <!-- 移动端遮罩层 - 只在小屏幕下显示 -->
        <div x-show="isSmallScreen && sidebarVisible"
             @click="sidebarVisible = false"
             class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
             x-transition:enter="transition-opacity ease-linear duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-300"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
        </div>
    </div>
    @pushonce('scripts')
        <script src="/assets/js/htmx.js"></script>
        @livewireScriptConfig
    @endpushonce
    @pushonce('style')
        @livewireStyles
    @endpushonce
</x-admin.layout>



